<template>
    <section>
        <booking :cur-court="$route.params.courtid"></booking>
        <confirm :show.sync="showGiveup" title="confirm deleting the item" @on-cancel="onCancel" @on-confirm="onConfirm">
            <p style="text-align:center;">Are you sure?</p>
        </confirm>
    </section>
</template>
<script>
import bookingComponent from '../../components/bookingComponent.vue';
import courtGetter from '../../vuex/getters/courtGetter';
import Confirm from 'vuxComponents/confirm';
import {
    go
} from '../../libs/router';
export default {
    //route 生命周期在Component中不适用
    route: {
        // same deal with beforeActicate
        canDeactivate(transition) {
            // console.log(transition);
            transition.abort();
            transition.abort("继续下单");
            console.log(transition.to.name);
            // if (transition.to.name === "centerdetail") {
            console.log("curSelected:" + this.courtSelected.length + ";user give up:" + this.confirmGiveup)
            if (!this.confirmGiveup || this.courtSelected.length > 0) {
                console.log("show confirm");
                this.showGiveup = true;
                transition.abort("继续下单");
            } else {
                console.log("go back");
                transition.next();
            }

        }
    },
    components: {
        "booking": bookingComponent,
        "confirm": Confirm
    },
    vuex: {
        getters: {
            courtSelected: courtGetter.getCourtFieldSelect
        }
    },
    data() {
        return {
            showGiveup: false,
            confirmGiveup: true
        }
    },
    methods: {
        onCancel() {
            console.log("cancel")
        },
        onConfirm() {
            console.log("confirm")
            this.confirmGiveup = true;
            history.go(-1);
        }
    }
}
</script>
<style>
</style>
